$(function () {
    $('.inner .tabs').on('click', 'a', function () {
        $(this).addClass('active').siblings('a').removeClass('active')

        $('.monitor .content').eq($(this).index()).show().siblings('.content').hide()
    })
    $('.marquee-view .marquee').each(function () {
        var rows = $(this).children().clone();
        $(this).append(rows);
    })
});

    (function () {
        var pie = document.querySelector('.pie')
        var myChart = echarts.init(pie)
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            series: [
                {
                    name: '点位统计',
                    type: 'pie',
                    radius: ['10%', '80%'],
                    center: ['50%', '50%'],
                    roseType: "radius",
                    itemStyle: {
                        borderRadius: 5
                    },
                    data: [
                        { value: 20, name: '云南' },
                        { value: 26, name: '北京' },
                        { value: 24, name: '山东' },
                        { value: 25, name: '河北' },
                        { value: 20, name: '江苏' },
                        { value: 25, name: '浙江' },
                     { value: 30, name: '四川' },
                        { value: 42, name: '湖北' }
                    ],
                    lable :{
                        fontSize: 10
                    },
                    labelLine: {
                        length: 6,
                        length2: 8
                    }
                }
            ]
        };
        myChart.setOption(option);

        window.addEventListener('resize', function () {
            myChart .resize()
        })
})();
    

// 柱形图模块
(function() {
    var item = {
      name: "",
      value: 1200,
      // 1. 修改当前柱形的样式
      itemStyle: {
        color: "#254065"
      },
      // 2. 鼠标放到柱子上不想高亮显示
      emphasis: {
        itemStyle: {
          color: "#254065"
        }
      },
      // 3. 鼠标经过柱子不显示提示框组件
      tooltip: {
        extraCssText: "opacity: 0"
      }
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    var option = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "#00fffb" }, // 0 起始颜色
          { offset: 1, color: "#0061ce" } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: "item"
      },
      grid: {
        left: "0%",
        right: "3%",
        bottom: "3%",
        top: "3%",
        //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: "rgba(0, 240, 255, 0.3)"
      },
      xAxis: [
        {
          type: "category",
          data: [
            "上海",
            "广州",
            "北京",
            "深圳",
            "合肥",
            "",
            "......",
            "",
            "杭州",
            "厦门",
            "济南",
            "成都",
            "重庆"
          ],
          axisTick: {
            alignWithLabel: false,
            // 把x轴的刻度隐藏起来
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          // x轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
              // width: 3
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisTick: {
            alignWithLabel: false,
            // 把y轴的刻度隐藏起来
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          // y轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
              // width: 3
            }
          },
          // y轴分割线的颜色样式
          splitLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)"
            }
          }
        }
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: [
            2100,
            1900,
            1700,
            1560,
            1400,
            item,
            item,
            item,
            900,
            750,
            600,
            480,
            240
          ]
        }
      ]
    };
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
})();
  
  

// 销售统计模块
(function () {
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line"));
    // 2. 指定配置和数据
    var option = {
        color: ['#00f2f1', '#ed3f35'],
      tooltip: {
        trigger: "axis"
      },
      legend: {
        textStyle: {
          color: '#4c9bfd' // 图例文字颜色
        },
        right: '10%' // 距离右边10%
      },
      grid: { 
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true,// 显示边框
        borderColor: '#012f4a',// 边框颜色
        containLabel: true // 包含刻度文字在内
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
           show: false // 去除刻度线
         },
         axisLabel: {
           color: '#4c9bfd' // 文本颜色
         },
         axisLine: {
           show: false // 去除轴线
         },
         boundaryGap: false  // 去除轴内间距
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false  // 去除刻度
        },
        axisLabel: {
          color: '#4c9bfd' // 文字颜色
        },
        splitLine: {
          lineStyle: {
            color: '#012f4a' // 分割线颜色
          }
        }
      },
      series: [
        {
          name: "预期销售额",
          type: "line",
          stack: "总量",
              data: data.year[0],
              smooth: true,
        },
        {
          name: "实际销售额",
          type: "line",
          stack: "总量",
            data:  data.year[1],
            smooth: true,
        }
      ]
    };
  
    // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 切换
  $('.sales').on('click', '.caption a', function () {
    index=$(this).index()-1
    // 样式
    $(this).addClass('active').siblings('a').removeClass('active')
    // currData 当前对应的数据  
    // this.dataset.type 标签上的data-type属性值，对应data中的属性                  
    var currData = data[this.dataset.type]
    // 修改图表1的数据
    option.series[0].data = currData[0]
    // 修改图表2的数据                  
    option.series[1].data = currData[1]
    // 重新设置数据  让图标重新渲染                  
    myChart.setOption(option)
  })

  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= 4) index = 0;
    $('.sales a').eq(index).click()
  }, 1000)
  $('.sales').hover(function () {
    clearInterval(timer)
  }, function () {
    clearInterval(timer)
    timer = setInterval(function () {
      index++;
      if (index >= 4) index = 0;
      $('.sales a').eq(index).click()
    }, 1000) 
  })
   // 当我们浏览器缩放的时候，图表也等比例缩放
   window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
  
//雷达图部分
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置
  var dataBJ =[[90, 19, 56, 11, 34]];

  var option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ['60%', '10%'],
      },
    radar: {
       indicator: [
        { name: '机场', max: 100 },
        { name: '商场', max: 100 },
        { name: '火车站', max: 100 },
        { name: '汽车站', max: 100 },
        { name: '地铁', max: 100 }
 ],
      radius:'65%',
      shape: "circle",
      splitNumber: 4,
      //文字的颜色
      name: {
        textStyle: {
          color: "#4c9bfd"
        }
      },
      //分割线的样式
      splitLine: {
        lineStyle: {
          color:'rgba(255,255,255,0.5)'
        }
      },
      splitArea: {
        show: false
      },
      //坐标轴的线
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.5)'
        }
      }
    },
    series: [
      {
        name: "北京",
        type: "radar",
        lineStyle: {
          normal: {
            color: '#fff',
        }        
        },
        data: dataBJ,
        symbol: "circle",
        aymbolsize: 5,
        itemStyle: {
          color: "#fff"
        },
       // 小圆点（拐点）设置为白色
       label: {
        show: true,
        color: '#fff',
        fontSize: 10
        },   
        areaStyle: {
          color: 'rgba(238, 197, 102, 0.6)',
        }
      }
    ]
  };
  // 3.把配置和数据给对象
  myChart.setOption(option);
})();

// 销售模块 饼形图 半圆形 设置方式
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".gauge"));
  // 2. 指定数据和配置
  var option = {
    series: [
      {
        name: "销售进度",
        type: "pie",
        radius: ['130%', '150%'],  
        // 移动下位置  套住50%文字
        center: ['48%', '80%'],   
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
          normal: {
            show: false
          }
        },
        startAngle: 180,
        hoverOffset: 0,  
        data: [{
          value: 100,  itemStyle: {
            // 颜色渐变#00c9e0->#005fc1
            color: new echarts.graphic.LinearGradient(
              // (x1,y2) 点到点 (x2,y2) 之间进行渐变
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                { offset: 1, color: "#005fc1" } // 1 结束颜色
              ]
            )
          }
        
        },
          { value: 100, itemStyle: { color: '#12274d' } }, { value: 200, itemStyle: { color: 'transparent' } }]
      }
    ]
  };
  // 3. 把数据和配置给实例对象
  myChart.setOption(option);
})();


//热销模块
(function () {
  var hotData = [
    {
      city: '北京',  // 城市
      sales: '25, 179',  // 销售额
      flag: true, //  上升还是下降
      brands: [   //  品牌种类数据
        { name: '可爱多', num: '9,086', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true },
      ]
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false },
      ]
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true },
      ]
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false },
      ]
    },
    {
      city: '山东1',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true },
      ]
    }
  ];
  // 方法1
  // var supHtml = '';
  // $.each(hotData, function (index, item) {
  //   supHtml += `<li>
  //   <span>${item.city}</span>
  //   <span> ${item.sales} <s class= ${item.flag ? "icon-up" : "icon-down"}></s></span>
  //   </li>`;
  // })
  // $('.sup').html(supHtml)
  
  //方法2 把数组放到数组里面,然后再渲染到页面,避免了字符串一直拼接,效率geng
  // 把数据放大数组里面,然后把数组转化为字符串,放到页面中,这样提高效率
  var arr = [];
  $.each(hotData, function (index,item) {
    arr.push(`<li>
              <span>${item.city}</span>
              <span> ${item.sales} <s class= ${item.flag ? "icon-up" : "icon-down"}></s></span>
              </li>`);
  })
  //将数组转换为字符串
  $('.sup').html(arr.join(''))

  //鼠标经过,li高亮显示
  $('.province ').on('mouseenter', '.sup li', function () {
    index=$(this).index()
    rander($(this))
  })

  function rander(that) {
   that.addClass('active').siblings().removeClass('active')
    //这里是通过li的索引,获取hotDate对象里面的数据
    // console.log(hotData[$(this).index()]);
    //获取到hotdate里面的数据之后,进而获得里面的brands
    var data = hotData[that.index()].brands;
    //然后把获取到的数据渲染到sub中
    //跟上面一样的方法,先声明一个空数据
    var arr = [];
    //然后遍历数据
    $.each(data, function (index, item) {
      arr.push(
      `<li>
      <span>${item.name}</span>
      <span>${item.num}<s class='${item.flag ? "icon-up" : "icon-down"}'></s></span>
      </li>`
      )
    })
    //遍历完了,之后,就把数据赋值到sub里面去,要转换为字符串
    $('.sub').html(arr.join(''))
 }

        // 所有的LI
      var lis = $('.province .sup li')
        // 第一个默认激活
      lis.eq(0).mouseenter()
  //鼠标经过停止定时器,鼠标离开开启定时器

  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= 5) index = 0;
    rander( lis.eq(index))

  }, 1000)
  
  $('.province .sup').hover(function () {
    clearInterval(timer);
  },function () {
    timer = setInterval(function () {
      index++;
      if (index >= 5) index = 0;
      rander( lis.eq(index))
  
    }, 1000)
  })

})()